import React, { Component, createRef } from 'react';
import { withRouter } from 'react-router-dom';
import { Form, Input, Button, message } from 'antd'
import axios from '../../http/axios';
import url from '../../config/url'
import Captcha from '../../components/Captcha'
class Passwdfrom extends Component {
    state = {}
    refCaptcha = createRef()
    render() {
        return (
            <Form
                name="basic"
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={this.onFinish}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名！',
                        },
                    ]}
                >
                    <Input placeholder='请输入用户名' />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码！',
                        },
                    ]}
                >
                    <Input.Password placeholder='请输入密码' />
                </Form.Item>

                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: '请输入验证码！',
                        },
                    ]}
                >
                    <div>
                        <Input placeholder='请输入验证码' />
                        <div style={{ height: '10px' }}></div>
                        <Captcha saveKey={this.saveKey} ref={this.refCaptcha} />
                    </div>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 10,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        );
    }
    saveKey = key => {
        // 获取子中的key
        this.setState({ key })
    }
    onFinish = values => {
        values.key = this.state.key
        // 发送登录请求
        axios.post(url.PasswdUrl, values).then(res => {
            console.log(res);
            res = res.data
            if (res.errNo === 0) {
                // message.success('文案', 时间, () => {回调})
                message.success('登录成功', 2, () => {
                    this.props.history.push('/dashboard')
                })
            } else {
                message.error(res.errText)
                // 登录失败 刷新验证码,通过ref获取captcha组件，调用方法
                this.refCaptcha.current.loadCaptcha()
            }
        }).catch(err => {
            console.log(err);
        })
    }
}

export default withRouter(Passwdfrom);
